<!DOCTYPE html>
<html>
<head>
    <title>Charged Particle in E and B Fields</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas with a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Define parameters for the drawing
        const cx = canvas.width / 2;
        const cy = canvas.height / 2;
        const R = 180; // Radius of the circular path in pixels
        const pointRadius = 3.5;
        const arrowLength = 70;
        const arrowHeadLength = 15;

        // --- Styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // --- Draw Uniform Magnetic Field (B) ---
        // Helper function to draw a single magnetic field dot (pointing out of the page)
        function drawBFieldDot(x, y) {
            ctx.save();
            ctx.lineWidth = 1.5;
            ctx.fillStyle = '#808080'; // Grey fill like the original image
            
            // Outer circle
            ctx.beginPath();
            ctx.arc(x, y, 4.5, 0, 2 * Math.PI);
            ctx.fill();
            ctx.stroke();
            
            // Inner dot
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(x, y, 1.2, 0, 2 * Math.PI);
            ctx.fill();
            ctx.restore();
        }

        // Position the magnetic field dots in a square grid around the main circle
        const bFieldSpacing = R + 70;
        drawBFieldDot(cx - bFieldSpacing, cy - bFieldSpacing);
        drawBFieldDot(cx, cy - bFieldSpacing);
        drawBFieldDot(cx + bFieldSpacing, cy - bFieldSpacing);
        drawBFieldDot(cx - bFieldSpacing, cy);
        drawBFieldDot(cx + bFieldSpacing, cy);
        drawBFieldDot(cx - bFieldSpacing, cy + bFieldSpacing);
        drawBFieldDot(cx, cy + bFieldSpacing);
        drawBFieldDot(cx + bFieldSpacing, cy + bFieldSpacing);
        
        // Draw the label for the magnetic field 'B'
        ctx.font = 'italic 30px Times New Roman';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.fillText('B', 60, 60);

        // --- Draw Circular Path ---
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Draw Center Point O ---
        // Draw the point at the center
        ctx.beginPath();
        ctx.arc(cx, cy, pointRadius, 0, 2 * Math.PI);
        ctx.fill();
        
        // Draw the label 'O'
        ctx.font = 'italic 30px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('O', cx - 25, cy);

        // --- Draw Particle P and Radius R ---
        const Px = cx + R;
        const Py = cy;
        
        // Draw the particle 'P' on the circle
        ctx.beginPath();
        ctx.arc(Px, Py, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Draw the dashed line for the radius 'R'
        ctx.save();
        ctx.setLineDash([6, 4]);
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(Px, Py);
        ctx.stroke();
        ctx.restore();

        // Draw the label 'R'
        ctx.fillText('R', cx + R / 2, cy);
        
        // Draw the label 'P'
        ctx.fillText('P', Px + 25, cy);

        // --- Draw Velocity Vector v₀ ---
        const v_start_x = Px;
        const v_start_y = Py;
        const v_end_x = Px;
        const v_end_y = Py - arrowLength;

        // Draw the vector's line
        ctx.beginPath();
        ctx.moveTo(v_start_x, v_start_y);
        ctx.lineTo(v_end_x, v_end_y);
        ctx.stroke();

        // Draw the arrowhead
        const angle = Math.atan2(v_start_y - v_end_y, v_start_x - v_end_x); // Should be PI/2
        ctx.beginPath();
        ctx.moveTo(v_end_x, v_end_y);
        ctx.lineTo(v_end_x - arrowHeadLength * Math.cos(angle - Math.PI / 6), v_end_y - arrowHeadLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(v_end_x, v_end_y);
        ctx.lineTo(v_end_x - arrowHeadLength * Math.cos(angle + Math.PI / 6), v_end_y - arrowHeadLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
        
        // Draw the label 'v₀'
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        const v_label_x = v_end_x + 18;
        const v_label_y = v_end_y + arrowLength / 2;
        
        // Draw the 'v' part
        ctx.font = 'italic 26px Times New Roman';
        ctx.fillText('v', v_label_x, v_label_y);

        // Draw the '0' subscript
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('0', v_label_x + 11, v_label_y + 8);
        
    </script>
</body>
</html>